<template>
	<view class="loading">
		<view v-if="!isTimeout" class="">
			<view v-if="mask" class="mask" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent"></view>
			<!-- 仓鼠 -->
			<view v-if="type === 1" class="loading-cst" ></view>
		</view>
	</view>
</template>

<script>
	/**
	 * loading
	 * @prop type 1 黑底菊花 2 小胖仓鼠
	 * @prop mask 遮罩层
	 * @prop timeout 超时时间（秒） 默认10s
	 */
	export default {
		name: 'u-loadings',
		data(){
			return {
				isTimeout: false
			}
		},
		props: {
			type: {
				type: Number,
				default: 1
			},
			mask: {
				type: Boolean,
				default: false
			},
			timeout: {
				type: Number,
				default: 10
			},
			title: {
				type: String,
				default: '请稍候'
			}
		},
		created() {
			this._timer = setTimeout(()=>{
				if(!this.isLoading){
					return;
				}
				this.isTimeout = true;
				uni.showToast({
					title: '加载超时，请重试',
					icon: 'none'
				})
			}, this.timeout * 1000)
		},
		destroyed() {
			this._timer && clearTimeout(this._timer);
		},
		methods: {
			stopPrevent(){}
		}
	}
</script>

<style scoped lang='scss'>
	@import "@/uview-ui/libs/css/style.components.scss";
	.loading{
		@include vue-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		position: fixed;
		left: 50%;
		top: 50%;
		width: 0;
		height: 0;
		z-index: 999;
	}
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.chry{
		min-width: 120rpx;
		min-height: 116rpx;
		border-radius: 10rpx;
		background-color: rgba(17,17,17,.7);
		
		.icon{
			width: 64rpx;
			height: 64rpx;
			background-image: url();
			background-repeat: no-repeat;
			background-size: 100% 100%;
			animation: mix-loading 1s steps(12) infinite;
		}
		.tit{
			margin: 10rpx 0 6rpx;
			font-size: 20rpx;
			color: #e9e9e9;
		}
	}
	@keyframes mix-loading{
		from {
			transform:rotate(0deg)
		}
		to {
			transform: rotate(1turn)
		}
	}

	
	.loading-cst {
	    width: 106rpx;
	    height: 120rpx;
	    background-size: contain;
	    background-repeat: no-repeat;
	    -webkit-animation: animMascot2 1s steps(1) infinite;
	    animation: animMascot2 1s steps(1) infinite
	}
	
	@keyframes animMascot2 {
	    0% {
	        background-image: url()
	    }
	
	    8.33% {
	        background-image: url()
	    }
	
	    16.7% {
	        background-image: url()
	    }
	
	    25% {
	        background-image: url()
	    }
	
	    33.3% {
	        background-image: url()
	    }
	
	    41.6% {
	        background-image: url()
	    }
	
	    50% {
	        background-image: url()
	    }
	
	    58.3% {
	        background-image: url()
	    }
	
	    66.6% {
	        background-image: url()
	    }
	
	    75% {
	        background-image: url()
	    }
	
	    83.3% {
	        background-image: url()
	    }
	
	    91.6% {
	        background-image: url()
	    }
	
	    to {
	        background-image: url()
	    }
	}
</style>
